<script>
import api from "@/api.js"

export default {
  data() {
    return {
      books: [],
      showModal: false,
      modalType: 'add', // 'add' 或 'edit'
      currentBook: {
        id: 0,
        title: '',
        author: '',
        publisher: '',
        publishDate: '',
        category: '',
        stock: null,
      },
    };
  },
  methods: {
    goHome() {
      this.$router.push('/main');
    },
    openModal(type, book = null) {
      this.modalType = type;
      if (type === 'edit' && book) {
        book.publishDate = this.formatDate(book.publishDate);
        this.currentBook = { ...book };
      } else {
        this.currentBook = {
          id: 0,
          title: '',
          author: '',
          publisher: '',
          publishDate: '',
          category: '',
          stock: null,
        };
      }
      this.showModal = true;
    },
    async saveBook() {
      if (this.modalType === 'add') {
        const response = await api.addBook(this.currentBook);
        const data = response.data;
        this.closeModal();
        alert(data.msg);
      } else if (this.modalType === 'edit') {
        const response = await api.editBook(this.currentBook);
        const data = response.data;
        this.closeModal();
        alert(data.msg);
      }
      await this.findBook();
    },
    async deleteBook(bookId) {
      const response = await api.deleteBook(bookId);
      const data = response.data;
      alert(data.msg);
      await this.findBook();
    },
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      return d.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
    },
    closeModal() {
      this.showModal = false;
      this.currentBook = {
        id: 0,
        title: '',
        author: '',
        publisher: '',
        publishDate: '',
        category: '',
        stock: null,
      };
    },
    async findBook() {
      const response = await api.findBookA();
      const data = response.data;
      this.books = data.data;
    }
  },
  mounted() {
    this.findBook();
  },
}
</script>

<template>
  <div id="app">
    <img src="@/assets/logo.png" alt="Logo" class="logo" @click="goHome" />
    <h1>图书管理页面</h1>
    <button class="add-btn" @click="openModal('add')">添加图书</button>

    <!-- 表格容器 -->
    <div class="table-container">
      <table>
        <thead>
        <tr>
          <th>图书 ID</th>
          <th>标题</th>
          <th>作者</th>
          <th>出版社</th>
          <th>出版日期</th>
          <th>类别</th>
          <th>库存</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="book in books" :key="book.id">
          <td>{{ book.id }}</td>
          <td>{{ book.title }}</td>
          <td>{{ book.author }}</td>
          <td>{{ book.publisher }}</td>
          <td>{{ formatDate(book.publishDate) }}</td>
          <td>{{ book.category }}</td>
          <td>{{ book.stock }}</td>
          <td>
            <button class="edit-btn" @click="openModal('edit', book)">修改</button>
            <button class="delete-btn" @click="deleteBook(book.id)">删除</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 模态框 -->
    <div v-if="showModal" class="modal-overlay" @click="closeModal">
      <div class="modal" @click.stop>
        <h3>{{ modalType === 'add' ? '添加图书' : '修改图书' }}</h3>
        <form @submit.prevent="saveBook">
          <div>
            <label>标题：</label>
            <input v-model="currentBook.title" required />
          </div>
          <div>
            <label>作者：</label>
            <input v-model="currentBook.author" required />
          </div>
          <div>
            <label>出版社：</label>
            <input v-model="currentBook.publisher" required />
          </div>
          <div>
            <label>出版日期：</label>
            <input type="date" v-model="currentBook.publishDate" required />
          </div>
          <div>
            <label>类别：</label>
            <input v-model="currentBook.category" required />
          </div>
          <div>
            <label>库存：</label>
            <input type="number" v-model="currentBook.stock" required />
          </div>
          <div class="modal-buttons">
            <button type="submit">确认</button>
            <button type="button" @click="closeModal">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped>
  /* 页面整体样式 */
#app {
  background-color: #ffffff; /* 背景白色 */
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333;
}
  .logo{
    width: 250px; /* 设置宽度 */
    height: auto; /* 保持比例 */
    margin-top: 10px;
    margin-left: 20px;
  }

  .logo:hover {
    transform: scale(1.1); /* 悬停时放大 */
  }

/* 标题样式 */
  h1 {
    margin-top: -20px;
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 24px;
  }
/* 按钮样式 */
button {
  padding: 8px 12px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  text-align: center;
}

.add-btn {
  background-color: #4CAF50;
  color: white;
}

.add-btn:hover {
  background-color: #45a049;
}

.edit-btn {
  background-color: #2196F3;
  color: white;
}

.edit-btn:hover {
  background-color: #1976d2;
}

.delete-btn {
  background-color: #f44336;
  color: white;
}

.delete-btn:hover {
  background-color: #d32f2f;
}

  /* 表格容器样式 */
  .table-container {
    max-height: 400px; /* 设置最大高度 */
    overflow-y: auto; /* 启用垂直滚动条 */
    border: 1px solid #ddd; /* 添加边框 */
    margin-top: 20px;
  }

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #f9f9f9;
}

thead {
  background-color: #f4f4f4;
}

th, td {
  padding: 12px;
  text-align: center;
  border: 1px solid #ddd;
}

th {
  font-weight: bold;
  color: #555;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #f1f1f1;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  width: 400px;
  z-index: 1000;
}

.modal h3 {
  margin-top: 0;
  text-align: center;
  font-size: 18px;
}

.modal form div {
  margin-bottom: 10px;
}

.modal form label {
  display: inline-block;
  width: 80px;
  text-align: right;
}

.modal form input {
  width: calc(100% - 90px);
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.modal-buttons {
  text-align: center;
}

.modal-buttons button {
  margin-left: 10px;
}
</style>

